.hfo-check-circle{
        mask: url("check-circle.svg") no-repeat center / contain;
        -webkit-mask: url("check-circle.svg") no-repeat center / contain;
    }
    .hfo-cart-circle{
        mask: url("cart-circle.svg") no-repeat center / contain;
        -webkit-mask: url("cart-circle.svg") no-repeat center / contain;
    }
    .hfo-actualite{
        mask: url("actualite.svg") no-repeat center / contain;
        -webkit-mask: url("actualite.svg") no-repeat center / contain;
    }
    .hfo-aide{
        mask: url("aide.svg") no-repeat center / contain;
        -webkit-mask: url("aide.svg") no-repeat center / contain;
    }
    .hfo-alerteNews{
        background: url("alerteNews.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-brochureZigZag{
        mask: url("brochureZigZag.svg") no-repeat center / contain;
        -webkit-mask: url("brochureZigZag.svg") no-repeat center / contain;
    }
    .hfo-burger{
        mask: url("burger.svg") no-repeat center / contain;
        -webkit-mask: url("burger.svg") no-repeat center / contain;
    }
    .hfo-catalogue{
        mask: url("catalogue.svg") no-repeat center / contain;
        -webkit-mask: url("catalogue.svg") no-repeat center / contain;
    }
    .hfo-contact{
        mask: url("contact.svg") no-repeat center / contain;
        -webkit-mask: url("contact.svg") no-repeat center / contain;
    }
    .hfo-coupeChaine{
        mask: url("coupeChaine.svg") no-repeat center / contain;
        -webkit-mask: url("coupeChaine.svg") no-repeat center / contain;
    }
    .hfo-coupeCourroie{
        mask: url("coupeCourroie.svg") no-repeat center / contain;
        -webkit-mask: url("coupeCourroie.svg") no-repeat center / contain;
    }
    .hfo-coupeGuidage{
        mask: url("coupeGuidage.svg") no-repeat center / contain;
        -webkit-mask: url("coupeGuidage.svg") no-repeat center / contain;
    }
    .hfo-documentation{
        mask: url("documentation.svg") no-repeat center / contain;
        -webkit-mask: url("documentation.svg") no-repeat center / contain;
    }
    .hfo-fabricationSurMesure{
        mask: url("fabricationSurMesure.svg") no-repeat center / contain;
        -webkit-mask: url("fabricationSurMesure.svg") no-repeat center / contain;
    }
    .hfo-faqDoc{
        mask: url("faqDoc.svg") no-repeat center / contain;
        -webkit-mask: url("faqDoc.svg") no-repeat center / contain;
    }
    .hfo-faqQuestion{
        mask: url("faqQuestion.svg") no-repeat center / contain;
        -webkit-mask: url("faqQuestion.svg") no-repeat center / contain;
    }
    .hfo-flecheEquivalence{
        mask: url("flecheEquivalence.svg") no-repeat center / contain;
        -webkit-mask: url("flecheEquivalence.svg") no-repeat center / contain;
    }
    .hfo-guideAchat{
        mask: url("guideAchat.svg") no-repeat center / contain;
        -webkit-mask: url("guideAchat.svg") no-repeat center / contain;
    }
    .hfo-guideAchatBonhomme{
        mask: url("guideAchatBonhomme.svg") no-repeat center / contain;
        -webkit-mask: url("guideAchatBonhomme.svg") no-repeat center / contain;
    }
    .hfo-montageMotoreducteur{
        mask: url("montageMotoreducteur.svg") no-repeat center / contain;
        -webkit-mask: url("montageMotoreducteur.svg") no-repeat center / contain;
    }
    .hfo-outils{
        mask: url("outils.svg") no-repeat center / contain;
        -webkit-mask: url("outils.svg") no-repeat center / contain;
    }
    .hfo-quiSommeNous{
        mask: url("quiSommeNous.svg") no-repeat center / contain;
        -webkit-mask: url("quiSommeNous.svg") no-repeat center / contain;
    }
    .hfo-reusinage{
        mask: url("reusinage.svg") no-repeat center / contain;
        -webkit-mask: url("reusinage.svg") no-repeat center / contain;
    }
    .hfo-reusinageLanding{
        mask: url("reusinageLanding.svg") no-repeat center / contain;
        -webkit-mask: url("reusinageLanding.svg") no-repeat center / contain;
    }
    .hfo-secteurActivite{
        mask: url("secteurActivite.svg") no-repeat center / contain;
        -webkit-mask: url("secteurActivite.svg") no-repeat center / contain;
    }
    .hfo-surMesure{
        mask: url("surMesure.svg") no-repeat center / contain;
        -webkit-mask: url("surMesure.svg") no-repeat center / contain;
    }
    .hfo-tuto{
        mask: url("tuto.svg") no-repeat center / contain;
        -webkit-mask: url("tuto.svg") no-repeat center / contain;
    }
    
    .hfo-fleche-courbe{
        mask: url("fleche.svg") no-repeat center / contain;
        -webkit-mask: url("fleche.svg") no-repeat center / contain;
    }
    .hfo-palettes{
        mask: url("palettes.svg") no-repeat center / contain;
        -webkit-mask: url("palettes.svg") no-repeat center / contain;
    }
    .hfo-destock{
        mask: url("destock.svg") no-repeat center / contain;
        -webkit-mask: url("destock.svg") no-repeat center / contain;
    }
    .hfo-pdf{
        mask: url("pdf.svg") no-repeat center / contain;
        -webkit-mask: url("pdf.svg") no-repeat center / contain;
    }
    .hfo-read{
        mask: url("read.svg") no-repeat center / contain;
        -webkit-mask: url("read.svg") no-repeat center / contain;
    }
    .hfo-retour{
        mask: url("retour.svg") no-repeat center / contain;
        -webkit-mask: url("retour.svg") no-repeat center / contain;
    }
    .hfo-ciseau{
        mask: url("ciseau.svg") no-repeat center / contain;
        -webkit-mask: url("ciseau.svg") no-repeat center / contain;
    }
    .hfo-ville{
        mask: url("ville.svg") no-repeat center / contain;
        -webkit-mask: url("ville.svg") no-repeat center / contain;
    }
    .hfo-monument{
        mask: url("monument.svg") no-repeat center / contain;
        -webkit-mask: url("monument.svg") no-repeat center / contain;
    }
    .hfo-gastronomie{
        mask: url("gastronomie.svg") no-repeat center / contain;
        -webkit-mask: url("gastronomie.svg") no-repeat center / contain;
    }
    .hfo-ITAFRAN{
        mask: url("ITAFRAN.svg") no-repeat center / contain;
        -webkit-mask: url("ITAFRAN.svg") no-repeat center / contain;
    }
    .hfo-performance2{
        mask: url("performance2.svg") no-repeat center / contain;
        -webkit-mask: url("performance2.svg") no-repeat center / contain;
    }
    .hfo-innovation2{
        mask: url("innovation2.svg") no-repeat center / contain;
        -webkit-mask: url("innovation2.svg") no-repeat center / contain;
    }
    .hfo-consideration{
        mask: url("consideration.svg") no-repeat center / contain;
        -webkit-mask: url("consideration.svg") no-repeat center / contain;
    }
    .hfo-SAV2{
        mask: url("SAV2.svg") no-repeat center / contain;
        -webkit-mask: url("SAV2.svg") no-repeat center / contain;
    }
    .hfo-remise2{
        mask: url("Remise2.svg") no-repeat center / contain;
        -webkit-mask: url("Remise2.svg") no-repeat center / contain;
    }
    .hfo-livraison2{
        mask: url("Livraison2.svg") no-repeat center / contain;
        -webkit-mask: url("Livraison2.svg") no-repeat center / contain;
    }
    .hfo-internet{
        mask: url("Internet.svg") no-repeat center / contain;
        -webkit-mask: url("Internet.svg") no-repeat center / contain;
    }
    .hfo-experience{
        mask: url("Experience.svg") no-repeat center / contain;
        -webkit-mask: url("Experience.svg") no-repeat center / contain;
    }
    .hfo-entrepot2{
        mask: url("Entrepot2.svg") no-repeat center / contain;
        -webkit-mask: url("Entrepot2.svg") no-repeat center / contain;
    }
    .hfo-bouton_play{
        background: url("bouton_play.png") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-innovation{
        mask: url("innovation.svg") no-repeat center / contain;
        -webkit-mask: url("innovation.svg") no-repeat center / contain;
    }
    .hfo-transparence{
        mask: url("transparence.svg") no-repeat center / contain;
        -webkit-mask: url("transparence.svg") no-repeat center / contain;
    }
    .hfo-adaptabilite{
        mask: url("adaptabilite.svg") no-repeat center / contain;
        -webkit-mask: url("adaptabilite.svg") no-repeat center / contain;
    }
    .hfo-fiabilite{
        mask: url("fiabilite.svg") no-repeat center / contain;
        -webkit-mask: url("fiabilite.svg") no-repeat center / contain;
    }
    .hfo-responsabilite{
        mask: url("responsabilite.svg") no-repeat center / contain;
        -webkit-mask: url("responsabilite.svg") no-repeat center / contain;
    }
    .hfo-agilite{
        mask: url("agilite.svg") no-repeat center / contain;
        -webkit-mask: url("agilite.svg") no-repeat center / contain;
    }
    .hfo-nurturance{
        mask: url("nurturance.svg") no-repeat center / contain;
        -webkit-mask: url("nurturance.svg") no-repeat center / contain;
    }
    .hfo-alarmNotif{
        background: url("alarmNotif.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-fleche{
        mask: url("FLEX.svg") no-repeat center / contain;
        -webkit-mask: url("FLEX.svg") no-repeat center / contain;
    }
    .hfo-csv{
        background: url("csv.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-csv-200{
        background: url("csv-200.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-csv-tabImport{
        background: url("csv-tabImport.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-sorry{
        mask: url("sorry.svg") no-repeat center / contain;
        -webkit-mask: url("sorry.svg") no-repeat center / contain;
    }
    .hfo-camionDepart-cs,
    .hfo-camionDepart-en{
        mask: url("camionDepart.svg") no-repeat center / contain;
        -webkit-mask: url("camionDepart.svg") no-repeat center / contain;
    }
    .hfo-camionDepart-fr{
        mask: url("camionDepart.svg") no-repeat center / contain;
        -webkit-mask: url("camionDepart.svg") no-repeat center / contain;
    }
    .hfo-file{
        mask: url("Importer votre commande.svg") no-repeat center / contain;
        -webkit-mask: url("Importer votre commande.svg") no-repeat center / contain;
    }
    .hfo-help{
        mask: url("Aide.svg") no-repeat center / contain;
        -webkit-mask: url("Aide.svg") no-repeat center / contain;
    }
    .hfo-plus{
        mask: url("Ajouter.svg") no-repeat center / contain;
        -webkit-mask: url("Ajouter.svg") no-repeat center / contain;
    }
    .hfo-amelioration-qualite{
        mask: url("Amelioration continue et qualite .svg") no-repeat center / contain;
        -webkit-mask: url("Amelioration continue et qualite .svg") no-repeat center / contain;
    }
    .hfo-amelioration{
        mask: url("Amelioration continue.svg") no-repeat center / contain;
        -webkit-mask: url("Amelioration continue.svg") no-repeat center / contain;
    }
    .hfo-performance{
        mask: url("Amelioration continue.svg") no-repeat center / contain;
        -webkit-mask: url("performance.svg") no-repeat center / contain;
    }
    .hfo-camion{
        mask: url("Camion.svg") no-repeat center / contain;
        -webkit-mask: url("Camion.svg") no-repeat center / contain;
    }
     .hfo-achatLigne{
        mask: url("achatLigne.svg") no-repeat center / contain;
        -webkit-mask: url("achatLigne.svg") no-repeat center / contain;
    }
      .hfo-SAV{
        mask: url("SAV.svg") no-repeat center / contain;
        -webkit-mask: url("SAV.svg") no-repeat center / contain;
    }
      .hfo-19h00{
        mask: url("19h00.svg") no-repeat center / contain;
        -webkit-mask: url("19h00.svg") no-repeat center / contain;
    }
    .hfo-map-marker{
        mask: url("ajouter modifier adresse de livraison.svg") no-repeat center / contain;
        -webkit-mask: url("ajouter modifier adresse de livraison.svg") no-repeat center / contain;
    }
    .hfo-check{
        mask: url("Check.svg") no-repeat center / contain;
        -webkit-mask: url("Check.svg") no-repeat center / contain;
    }
    .hfo-creative{
        mask: url("Creativité.svg") no-repeat center / contain;
        -webkit-mask: url("Creativité.svg") no-repeat center / contain;
    }
    .hfo-croix{
        mask: url("Croix rouge.svg") no-repeat center / contain;
        -webkit-mask: url("Croix rouge.svg") no-repeat center / contain;
    }
    .hfo-belt-cut{
        mask: url("Decoupe de rail et patin.svg") no-repeat center / contain;
        -webkit-mask: url("Decoupe de rail et patin.svg") no-repeat center / contain;
    }
    .hfo-devis-plan{
        mask: url("Devis sur plan.svg") no-repeat center / contain;
        -webkit-mask: url("Devis sur plan.svg") no-repeat center / contain;
    }
    .hfo-secure{
        mask: url("Element de rassurance 1.svg") no-repeat center / contain;
        -webkit-mask: url("Element de rassurance 1.svg") no-repeat center / contain;
    }
    .hfo-express{
        mask: url("Element de rassurance 2.svg") no-repeat center / contain;
        -webkit-mask: url("Element de rassurance 2.svg") no-repeat center / contain;
    }
    .hfo-stock{
        mask: url("Element de rassurance 3.svg") no-repeat center / contain;
        -webkit-mask: url("Element de rassurance 3.svg") no-repeat center / contain;
    }
    .hfo-remise{
        mask: url("Element de rassurance 4.svg") no-repeat center / contain;
        -webkit-mask: url("Element de rassurance 4.svg") no-repeat center / contain;
    }
    .hfo-engagement{
        mask: url("Engagement.svg") no-repeat center / contain;
        -webkit-mask: url("Engagement.svg") no-repeat center / contain;
    }
    .hfo-equipe{
        mask: url("Esprit d'équipe.svg") no-repeat center / contain;
        -webkit-mask: url("Esprit d'équipe.svg") no-repeat center / contain;
    }
    .hfo-ethic{
        mask: url("Ethique.svg") no-repeat center / contain;
        -webkit-mask: url("Ethique.svg") no-repeat center / contain;
    }
    .hfo-exellence{
        mask: url("Exellence.svg") no-repeat center / contain;
        -webkit-mask: url("Exellence.svg") no-repeat center / contain;
    }
    .hfo-step-fab{
        mask: url("Fabrication sur mesure.svg") no-repeat center / contain;
        -webkit-mask: url("Fabrication sur mesure.svg") no-repeat center / contain;
    }
    .hfo-facture{
        mask: url("Facture livraison.svg") no-repeat center / contain;
        -webkit-mask: url("Facture livraison.svg") no-repeat center / contain;
    }
    .hfo-filecase{
        mask: url("Importer une commande.svg") no-repeat center / contain;
        -webkit-mask: url("Importer une commande.svg") no-repeat center / contain;
    }
    .hfo-user{
        mask: url("Compte.svg") no-repeat center / contain;
        -webkit-mask: url("Compte.svg") no-repeat center / contain;
    }
    .hfo-user-times{
        mask: url("user-times.svg") no-repeat center / contain;
        -webkit-mask: url("user-times.svg") no-repeat center / contain;
    }
    
    .hfo-news{
        mask: url("news.svg") no-repeat center / contain;
        -webkit-mask: url("news.svg") no-repeat center / contain;
    }
    .hfo-catalog{
        mask: url("Cataogue.svg") no-repeat center / contain;
        -webkit-mask: url("Cataogue.svg") no-repeat center / contain;
    }
    .hfo-down-arrow{
        mask: url("Les remises.svg") no-repeat center / contain;
        -webkit-mask: url("Les remises.svg") no-repeat center / contain;
    }
    .hfo-loupe{
        mask: url("Loupe.svg") no-repeat center / contain;
        -webkit-mask: url("Loupe.svg") no-repeat center / contain;
    }
    .hfo-mail{
        mask: url("Mail.svg") no-repeat center / contain;
        -webkit-mask: url("Mail.svg") no-repeat center / contain;
    }
    .hfo-home{
        mask: url("Maison.svg") no-repeat center / contain;
        -webkit-mask: url("Maison.svg") no-repeat center / contain;
    }
    .hfo-cart{
        mask: url("Panier2.svg") no-repeat center / contain;
        -webkit-mask: url("Panier2.svg") no-repeat center / contain;
    }
    .hfo-cart-valide{
        mask: url("panier_valide.svg") no-repeat center / contain;
        -webkit-mask: url("panier_valide.svg") no-repeat center / contain;
    }
    .hfo-photo{
        mask: url("Photo.svg") no-repeat center / contain;
        -webkit-mask: url("Photo.svg") no-repeat center / contain;
    }
    .hfo-trash{
        mask: url("Poubelle.svg") no-repeat center / contain;
        -webkit-mask: url("Poubelle.svg") no-repeat center / contain;
    }
    .hfo-professional{
        mask: url("Professionnalisme.svg") no-repeat center / contain;
        -webkit-mask: url("Professionnalisme.svg") no-repeat center / contain;
    }
    .hfo-rapport{
        mask: url("Reprise d'usinage.svg") no-repeat center / contain;
        -webkit-mask: url("Reprise d'usinage.svg") no-repeat center / contain;
    }
    .hfo-respect{
        mask: url("Respect.svg") no-repeat center / contain;
        -webkit-mask: url("Respect.svg") no-repeat center / contain;
    }
    .hfo-suivi-fab{
        mask: url("Suive de frabrication.svg") no-repeat center / contain;
        -webkit-mask: url("Suive de frabrication.svg") no-repeat center / contain;
    }
    .hfo-sur-mesure-slide{
        mask: url("Sur mesure page.svg") no-repeat center / contain;
        -webkit-mask: url("Sur mesure page.svg") no-repeat center / contain;
    }
    .hfo-sur-mesure{
        mask: url("Sur mesure.svg") no-repeat center / contain;
        -webkit-mask: url("Sur mesure.svg") no-repeat center / contain;
    }
    .hfo-tel{
        mask: url("Tel.svg") no-repeat center / contain;
        -webkit-mask: url("Tel.svg") no-repeat center / contain;
    }
    .hfo-earth{
        mask: url("terre.svg") no-repeat center / contain;
        -webkit-mask: url("terre.svg") no-repeat center / contain;
    }
    .hfo-square-check{
        mask: url("Vos bons de livraisons.svg") no-repeat center / contain;
        -webkit-mask: url("Vos bons de livraisons.svg") no-repeat center / contain;
    }
    .hfo-vos-catalogue{
        mask: url("Vos catalogues.svg") no-repeat center / contain;
        -webkit-mask: url("Vos catalogues.svg") no-repeat center / contain;
    }
    .hfo-suivi-commande{
        mask: url("Vos commandes.svg") no-repeat center / contain;
        -webkit-mask: url("Vos commandes.svg") no-repeat center / contain;
    }
    .hfo-vos-contact{
        mask: url("Vos contacts.svg") no-repeat center / contain;
        -webkit-mask: url("Vos contacts.svg") no-repeat center / contain;
    }
    .hfo-devis{
        mask: url("Vos devis.svg") no-repeat center / contain;
        -webkit-mask: url("Vos devis.svg") no-repeat center / contain;
    }
    .hfo-suivi-facture{
        mask: url("Vos factures.svg") no-repeat center / contain;
        -webkit-mask: url("Vos factures.svg") no-repeat center / contain;
    }
    .hfo-light-bulb{
        mask: url("Votre minimum de commande.svg") no-repeat center / contain;
        -webkit-mask: url("Votre minimum de commande.svg") no-repeat center / contain;
    }
    .hfo-bfa{
        mask: url("Votre remise BFA.svg") no-repeat center / contain;
        -webkit-mask: url("Votre remise BFA.svg") no-repeat center / contain;
    }
    .hfo-pill-remise{
        mask: url("Votre remise internet.svg") no-repeat center / contain;
        -webkit-mask: url("Votre remise internet.svg") no-repeat center / contain;
    }
    .hfo-remise-progressive{
        mask: url("Votre remise progressive.svg") no-repeat center / contain;
        -webkit-mask: url("Votre remise progressive.svg") no-repeat center / contain;
    }
    .hfo-remise-quantitative{
        mask: url("Votre remise quantitative.svg") no-repeat center / contain;
        -webkit-mask: url("Votre remise quantitative.svg") no-repeat center / contain;
    }
    .hfo-remise-marque{
        mask: url("Votre remises de marque.svg") no-repeat center / contain;
        -webkit-mask: url("Votre remises de marque.svg") no-repeat center / contain;
    }
    .hfo-accessoire{
        mask: url("Picto menu/Accessoire.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Accessoire.svg") no-repeat center / contain;
    }
    .hfo-accouplement{
        mask: url("Picto menu/Accouplement et serrage.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Accouplement et serrage.svg") no-repeat center / contain;
    }
    .hfo-chain{
        mask: url("Picto menu/Chaine et pignon.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Chaine et pignon.svg") no-repeat center / contain;
    }
    .hfo-moteur{
        mask: url("Picto menu/Moteur.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Moteur.svg") no-repeat center / contain;
    }
    .hfo-poulie{
        mask: url("Picto menu/Poulie et Courroie.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Poulie et Courroie.svg") no-repeat center / contain;
    }
    .hfo-roulement{
        mask: url("Picto menu/Roulement.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Roulement.svg") no-repeat center / contain;
    }
    .hfo-guidage{
        mask: url("Picto menu/Guidage.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Guidage.svg") no-repeat center / contain;
    }
    .hfo-menu-sur-mesure{
        mask: url("Picto menu/Sur Mesure.svg") no-repeat center / contain;
        -webkit-mask: url("Picto menu/Sur Mesure.svg") no-repeat center / contain;
    }
    .hfo-bientot{
        mask: url("bientot-disponible.svg") no-repeat center / contain;
        -webkit-mask: url("bientot-disponible.svg") no-repeat center / contain;
    }
    .hfo-services{
        mask: url("service-premium.svg") no-repeat center / contain;
        -webkit-mask: url("service-premium.svg") no-repeat center / contain;
    }
    .hfo-entrepot{
        mask: url("entrepot.svg") no-repeat center / contain;
        -webkit-mask: url("entrepot.svg") no-repeat center / contain;
    }
    .hfo-secure-no-color{
        background: url("Element de rassurance 1.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-express-no-color{
        background: url("Element de rassurance 2.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-stock-no-color{
        background: url("Element de rassurance 3.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-remise-no-color{
        background: url("Element de rassurance 4.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-articles-no-color{
        background: url("ArticlesDispo.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    
    .hfo-19heure{
        mask: url("19h00.svg") no-repeat center / contain;
        -webkit-mask: url("19h00.svg") no-repeat center / contain;
    }
    .hfo-clicsouris{
        mask: url("Souris clic.svg") no-repeat center / contain;
        -webkit-mask: url("Souris clic.svg") no-repeat center / contain;
    }
    .hfo-colis{
        mask: url("Colis.svg") no-repeat center / contain;
        -webkit-mask: url("Colis.svg") no-repeat center / contain;
    }
    .hfo-remises{
        mask: url("Remises.svg") no-repeat center / contain;
        -webkit-mask: url("Remises.svg") no-repeat center / contain;
    }
    .hfo-stock2{
        mask: url("Stock.svg") no-repeat center / contain;
        -webkit-mask: url("Stock.svg") no-repeat center / contain;
    }
    .hfo-livraison{
        mask: url("Livraison.svg") no-repeat center / contain;
        -webkit-mask: url("Livraison.svg") no-repeat center / contain;
    }
    .hfo-caddie{
        mask: url("Caddie.svg") no-repeat center / contain;
        -webkit-mask: url("Caddie.svg") no-repeat center / contain;
    }
    .hfo-creationCompte{
        mask: url("creationCompte.svg") no-repeat center / contain;
        -webkit-mask: url("creationCompte.svg") no-repeat center / contain;
    }
    .hfo-inscription{
        mask: url("inscription.svg") no-repeat center / contain;
        -webkit-mask: url("inscription.svg") no-repeat center / contain;
    }
    .hfo-enligne{
        mask: url("enligne.svg") no-repeat center / contain;
        -webkit-mask: url("enligne.svg") no-repeat center / contain;
    }
    .hfo-Delai{
        mask: url("Delai.svg") no-repeat center / contain;
        -webkit-mask: url("Delai.svg") no-repeat center / contain;
    }
    .hfo-Maitrise{
        mask: url("Maitrise.svg") no-repeat center / contain;
        -webkit-mask: url("Maitrise.svg") no-repeat center / contain;
    }
    .hfo-Precision{
        mask: url("Precision.svg") no-repeat center / contain;
        -webkit-mask: url("Precision.svg") no-repeat center / contain;
    }
    .hfo-Qualite{
        mask: url("Qualite.svg") no-repeat center / contain;
        -webkit-mask: url("Qualite.svg") no-repeat center / contain;
    }
    .hfo-rainure{
        mask: url("rainure.svg") no-repeat center / contain;
        -webkit-mask: url("rainure.svg") no-repeat center / contain;
    }
    .hfo-trouTaraude{
        background: url("trouTaraude.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-visu{
        mask: url("visu.svg") no-repeat center / contain;
        -webkit-mask: url("visu.svg") no-repeat center / contain;
    }
    
    .hfo-agro-alimentaire{
        mask: url("Agroalimentaire.svg") no-repeat center / contain;
        -webkit-mask: url("Agroalimentaire.svg") no-repeat center / contain;
    }
    .hfo-agricole-et-forestier{
        mask: url("Agricole forestier.svg") no-repeat center / contain;
        -webkit-mask: url("Agricole forestier.svg") no-repeat center / contain;
    }
    .hfo-carton-et-papier{
        mask: url("Carton et papier.svg") no-repeat center / contain;
        -webkit-mask: url("Carton et papier.svg") no-repeat center / contain;
    }
    .hfo-levage-et-manutention{
        mask: url("Levage et manutention.svg") no-repeat center / contain;
        -webkit-mask: url("Levage et manutention.svg") no-repeat center / contain;
    }
    .hfo-machine-specialisee{
        mask: url("Machine spe.svg") no-repeat center / contain;
        -webkit-mask: url("Machine spe.svg") no-repeat center / contain;
    }
    .hfo-mines-et-carrieres{
        mask: url("Mine et carriere.svg") no-repeat center / contain;
        -webkit-mask: url("Mine et carriere.svg") no-repeat center / contain;
    }
    .hfo-motoculture{
        mask: url("Motoculture.svg") no-repeat center / contain;
        -webkit-mask: url("Motoculture.svg") no-repeat center / contain;
    }
    .hfo-scierie{
        mask: url("Scierie.svg") no-repeat center / contain;
        -webkit-mask: url("Scierie.svg") no-repeat center / contain;
    }
    
    .hfo-secteur-export{
        background: url("terre.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-france{
        background: url("Comerciaux france.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-est{
        background: url("Comerciaux Est.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-ouest{
        background: url("Comerciaux Ouest.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-nord{
        background: url("Comerciaux Nord.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-sud{
        background: url("Comerciaux Sud.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-nord-ouest{
        background: url("Nord ouest.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-nord-est{
        background: url("Nord est.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-sud-ouest{
        background: url("Sud ouest.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-secteur-sud-est{
        background: url("Sud est.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    
    .hfo-importer{
        mask: url("Importer.svg") no-repeat center / contain;
        -webkit-mask: url("Importer.svg") no-repeat center / contain;
    }
    .hfo-etre-rapelle{
        mask: url("Etre rapelle.svg") no-repeat center / contain;
        -webkit-mask: url("Etre rapelle.svg") no-repeat center / contain;
    }
    .hfo-devis-no-color{
        background: url("suivi-devis.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-livraison-no-color{
        background: url("suivi-livraison.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-commande-no-color{
        background: url("suivi-commande.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    
    
    .hfo-charlyValid{
        background: url("charlyValid.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    .hfo-charlyError{
        background: url("charlyError.svg") no-repeat center / contain;
        background-color:transparent !important;
    }
    
    .hfo-placement-centre{
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }
    .hfo{
        display:inline-block;
        width: 1rem;
        height: 1rem;
    }
    .hfo-long{
        width:7.5rem;
        height: 1.5rem;
    }
    .hfo-square{
        width: 80%;
        height: 80%;
    }
    .hfo-2x{
        width: 1.5rem;
        height: 1.5rem;
    }
    .hfo-2_0x{
        width: 2rem;
        height: 2rem;
    }
    .hfo-2_5x{
        width: 2.5rem;
        height: 2.5rem;
    }
    .hfo-3x{
        width: 3rem;
        height: 3rem;
    }
    .hfo-4x{
        width: 4rem;
        height: 4rem;
    }
    .hfo-5x{
        width: 5rem;
        height: 5rem;
    }
    .hfo-5x-logo{
        width: 8rem;
        height: 5rem;
    }
    .hfo-6x{
        width: 6rem;
        height: 6rem;
    }
    .hfo-7x{
        width: 7rem;
        height: 7rem;
    }
    .hfo-10x{
        width: 10rem;
        height: 10rem;
    }
    .hfo-100x{
        width: 15rem;
        height: 15rem;
    }
    @media(min-width:576px){
        .hfo-sm-2x{
            width: 1.5rem;
            height: 1.5rem;
        }
        .hfo-sm-2_5x{
            width: 2.5rem;
            height: 2.5rem;
        }
        .hfo-sm-3x{
            width: 3rem;
            height: 3rem;
        }
        .hfo-sm-4x{
            width: 4rem;
            height: 4rem;
        }
        .hfo-sm-5x{
            width: 5rem;
            height: 5rem;
        }
        .hfo-sm-7x{
            width: 7rem;
            height: 7rem;
        }
        .hfo-sm-10x{
            width: 10rem;
            height: 10rem;
        }
        .hfo-sm-100x{
            width: 15rem;
            height: 15rem;
        }
    }
    @media(max-width:768px){
        .hfo-small-phone-header{
            width: 1.7rem;
            height: 1.7rem;
        }
    }
    @media(min-width:768px){
        .hfo-md-2x{
            width: 1.5rem;
            height: 1.5rem;
        }
        .hfo-md-2_5x{
            width: 2.5rem;
            height: 2.5rem;
        }
        .hfo-md-3x{
            width: 3rem;
            height: 3rem;
        }
        .hfo-md-4x{
            width: 4rem;
            height: 4rem;
        }
        .hfo-md-5x{
            width: 5rem;
            height: 5rem;
        }
        .hfo-md-7x{
            width: 7rem;
            height: 7rem;
        }
        .hfo-md-10x{
            width: 10rem;
            height: 10rem;
        }
        .hfo-md-100x{
            width: 15rem;
            height: 15rem;
        }
    }
    @media(min-width:992px){
        .hfo-lg-2x{
            width: 1.5rem;
            height: 1.5rem;
        }
        .hfo-lg-2_5x{
            width: 2.5rem;
            height: 2.5rem;
        }
        .hfo-lg-3x{
            width: 3rem;
            height: 3rem;
        }
        .hfo-lg-4x{
            width: 4rem;
            height: 4rem;
        }
        .hfo-lg-5x{
            width: 5rem;
            height: 5rem;
        }
        .hfo-lg-7x{
            width: 7rem;
            height: 7rem;
        }
        .hfo-lg-10x{
            width: 10rem;
            height: 10rem;
        }
        .hfo-lg-100x{
            width: 15rem;
            height: 15rem;
        }
    }
    @media(min-width:1200px){
        .hfo-xl-2x{
            width: 1.5rem;
            height: 1.5rem;
        }
        .hfo-xl-2_5x{
            width: 2.5rem;
            height: 2.5rem;
        }
        .hfo-xl-3x{
            width: 3rem;
            height: 3rem;
        }
        .hfo-xl-4x{
            width: 4rem;
            height: 4rem;
        }
        .hfo-xl-5x{
            width: 5rem;
            height: 5rem;
        }
        .hfo-xl-7x{
            width: 7rem;
            height: 7rem;
        }
        .hfo-xl-10x{
            width: 10rem;
            height: 10rem;
        }
        .hfo-xl-100x{
            width: 15rem;
            height: 15rem;
        }
    }
    a:hover .hfo-hover-primary{
        background-color: #f34e13 !important;
    }
    .hfo-hover-primary:hover{
        background-color: #f34e13 !important;
    }
.bg-none{
    background-color:inherit;
}
.hfo.text-primary {
    background-color: #f34e13 !important;
}
.text-hover-primary:hover .hfo {
    background-color: #f34e13 !important;
}
a.hfo.text-primary:focus,
a.hfo.text-primary:hover {
    background-color: #c93c0a !important;
}
.hfo.text-secondary {
    background-color: #4f4c4c !important;
}
a.hfo.text-secondary:focus,
a.hfo.text-secondary:hover {
    background-color: #6c757d !important;
}
.hfo.text-success {
    background-color: #28a745 !important;
}
a.hfo.text-success:focus,
a.hfo.text-success:hover {
    background-color: #1e7e34 !important;
}
.hfo.text-info {
    background-color: #17a2b8 !important;
}
a.hfo.text-info:focus,
a.hfo.text-info:hover {
    background-color: #117a8b !important;
}
.hfo.text-warning {
    background-color: #ffc107 !important;
}
a.hfo.text-warning:focus,
a.hfo.text-warning:hover {
    background-color: #d39e00 !important;
}
.hfo.text-danger {
    background-color: #dc3545 !important;
}
a.hfo.text-danger:focus,
a.hfo.text-danger:hover {
    background-color: #bd2130 !important;
}
.hfo.text-light {
    background-color: #f8f9fa !important;
}
a.hfo.text-light:focus,
a.hfo.text-light:hover {
    background-color: #dae0e5 !important;
}
.hfo.text-dark {
    background-color: #343a40 !important;
}
a.hfo.text-dark:focus,
a.hfo.text-dark:hover {
    background-color: #1d2124 !important;
}
.hfo.text-white {
    background-color: #fff !important;
}
.hfo.text-transparent {
    background-color: transparent !important;
}


.hfo.itafran-pulse{
    background-color:#f47400  !important;
}

.container-onglets-menu-suivi .active .hfo.text-white {
    background-color: #343a40 !important;
}